@import '~@angular/material/_theming';

$navigation-font-size-base: 14px !default;
$navigation-border-radius: 2px !default;

mat-card {
  padding: 10px;
  margin: 10px;
}

.nav-title {
  @include mat-truncate-line();

  a {
    text-decoration: none;
  }
}

.nav-desc {
  height: 150px;
  overflow: hidden;
}

.nav-category {
  position: relative;
  padding-left: 80px;
}

.nav-category-title {
  margin: 0 0 15px;
  position: absolute;
  left: 10px;
  border-bottom: none;
  font-size: $navigation-font-size-base;
  line-height: 28px;
}

.nav-category-item {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  padding: 0 5px;
  border-radius: $navigation-border-radius;
  font-size: $navigation-font-size-base;
  font-weight: 500;
  text-align: center;
  line-height: 28px;
  cursor: default;
}

.nav-item {
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: default;

  &:hover {
    transform: translate(0, -8px);
    box-shadow: 0 20px 20px rgba(0, 0, 0, .16)
  }
}
